
//窗口加载事件
window.addEventListener('load', function () {

    /**
     * 需求: 鼠标移入a标签, 改变当前a标签的背景图(水平定位) 显示当前a标签下面的span
     * 需求: 鼠标移出a标签, 变回原样
     */

    //获取元素
    let adom = document.querySelectorAll('#online a');

    //遍历
    adom.forEach(function (v) {
        //移入
        v.addEventListener('mouseover', function () {
            //console.log( 'v:',v );//当前对象
            //console.log( 'this:',this ); //移入哪个a标签, 它就是当前对象

            this.style.backgroundPositionX = '-50px'
            this.querySelector('span').style.display = 'block'
        })

        //移出
        v.addEventListener('mouseout', function () {
            this.style.backgroundPositionX = 0
            this.querySelector('span').style.display = 'none'
        })
    })




    /**
     * 需求: 滚动网页窗口,当滚动距离大于等于600时,显示rTop, 否则就隐藏
     * 分析: 
     *      事件源:   window
     *      事件类型: scroll
     */

    //获取rTop
    let rTop = document.querySelector('#rTop')

    window.addEventListener('scroll', function () {
        //滚动距离
        let sTop = document.documentElement.scrollTop

        //判断
        if (sTop >= 600) {
            rTop.style.display = 'block'
        } else {
            rTop.style.display = 'none'
        }
    })
    /**
     * 需求: 点击rTop, 让滚动条慢慢回到顶部
     * 需求: 点击rTop, 让滚动条1s回到顶部
     * 需求: 点击rTop, 让滚动条1s回到顶部(每隔30毫秒运动)
     */

    rTop.addEventListener('click', function () {

        let t = 1000;//ms//定义运动总时间

        let s = document.documentElement.scrollTop//获取当前的总路程
        let v = s / t;//速度
        //开启计时器
        let timeId = setInterval(function () {

            let sTop = document.documentElement.scrollTop//每30毫秒的初始滚动距离
            document.documentElement.scrollTop = sTop - 30 * v//减去滚动路程

            if (sTop <= 0) {//判断
                clearInterval(timeId)
            }

        }, 30)

    })




    /*
        选项卡需求: 
            鼠标移入菜单li-
                1.给当前菜单添加激活样式 - 添加类名active
                2.显示当前菜单对应的内容
    */

    //获取
    let li = document.querySelectorAll('#tabMenu li');//菜单
    let p = document.querySelectorAll('#tabCont p');//内容

    //遍历
    li.forEach(function (v, i) {
        //移入事件
        v.addEventListener('mouseover', function () {

            //先 - 清除所有li的类名active
            li.forEach(function (vli) {
                vli.className = '';
            })

            //再 - 给当前菜单添加激活样式
            this.className = 'active';

            //先 - 清除所有内容的类名on
            p.forEach(function (vp) {
                vp.className = ''
            })
            //再 - 显示当前菜单对应的内容
            p[i].className = 'on'
        })
    })



    /*
            模态框需求: 蒙层盖住内容，模态框弹出，登录或注册账号
                
        */
    //模态框
    let btn = document.querySelector('#btn')
    let btn1 = document.querySelector('#btn1')
    let box = document.querySelector('#box')
    btn.addEventListener('click', function () {
        box.style.display = 'block'
    })
    let hideBtn = document.querySelector('#hideBtn')
    hideBtn.addEventListener('click', function () {
        box.style.display = 'none'
    })

    /*
            登录需求: 当输入有长度时，图标出现
                
        */
    user.addEventListener('input', function () {
        if (user.value.length > 0) {
            delBtn.style.display = 'block'
        } else {
            delBtn.style.display = 'none'
        }

    })
    eyes.addEventListener('keyup', function () {
        if (eyes.value.length > 0) {
            delBtn1.style.display = 'block'
        } else {
            delBtn1.style.display = 'none'
        }

    })

    /*
    登录需求: 输入长度清空图标隐藏
        
*/
    delBtn.addEventListener('click', function () {
        user.value = '';//清空用户名
        delBtn.style.display = 'none';//隐藏
    })


    /*
           登录需求: 点击眼睛图标切换模式
               
       */

    //利用标杆思想，实现需求
    //这只是标杆思想的一种应用，使用方式
    let flag = true;
    delBtn1.addEventListener('click', function () {
        if (flag) {
            delBtn1.src = '../imgs/open.png'
            eyes.type = 'text'
        } else {
            delBtn1.src = '../imgs/close.png'
            eyes.type = 'password'
        }
        flag = !flag;
    })

    //定义表单标杆
    let formFlag = {
        user: false,
        pwd: false
    }




    /*
            登录需求: 失去焦点触发验证
                
        */

    //用户名
    user.addEventListener('blur', function () {
        //创建验证规则
        //规则：6-12位字母开头，后面跟数字 字母 下划线
        let reg = /^[a-zA-Z]\w{5,11}$///   \w 数字 字母 下划线
        //获取用户名
        let uVal = user.value;
        //验证
        let result = reg.test(uVal)
        //判断
        if (result) {
            //正确
            userMsg.textContent = ''
            user.style.border = '1px solid #ccc'
            formFlag.user = true;
        } else {
            //错误
            userMsg.textContent = '6-12位字母开头，后面跟数字 字母 下划线'
            user.style.border = '1px solid red'
            formFlag.user = false;

        }
    })

    //密码
    eyes.addEventListener('blur', function () {
        let reg = /^[a-zA-Z]\w{7,15}$/
        let uVal = eyes.value;
        let result = reg.test(uVal)
        if (result) {
            pasMsg.textContent = ''
            eyes.style.border = '1px solid #ccc'
            formFlag.pwd = true;

        } else {
            pasMsg.textContent = '8-16位字母开头密码由数字 字母 下划线组成'
            eyes.style.border = '1px solid red'
            formFlag.pwd = false;

        }
    })


    /* 点击登录按钮验证输入的合法性 */
    btn1.addEventListener('click', function () {
        if (formFlag.user === false) {
            userMsg.textContent = '6-12位字母开头，后面跟数字 字母 下划线'
            user.style.border = '1px solid red'
        } else if (formFlag.pwd === false) {
            //错误
            pasMsg.textContent = '6-12位字母开头，后面跟数字 字母 下划线'
            pwd.style.border = '1px solid red'
        } else {
            location.href = './success.html'
        }
    })



})